<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>产品列表</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="productList" >
              <el-table-column label="" align="center" prop="id" />
              <el-table-column label="产品编码" align="center" prop="code" />
              <el-table-column label="产品型号" align="center" prop="model" />
              <el-table-column label="产品名称" align="center" prop="name" />
              <el-table-column label="库存状态" align="center" prop="inventoryState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_inventory_state" :value="scope.row.inventoryState"/>
                </template>
              </el-table-column>
              <el-table-column label="检验状态" align="center" prop="tastState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_test_state" :value="scope.row.tastState"/>
                </template>
              </el-table-column>
              <el-table-column label="故障状态" align="center" prop="faultState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_fault_state" :value="scope.row.faultState"/>
                </template>
              </el-table-column>
              <el-table-column label="创建日期" align="center" prop="createDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>Order List</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">开关ID</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">雷管</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">平均电流（mA）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">平均电压（V）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">最高电流（mA）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">最高电压（V）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">级联电流（mA）</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">测试结果</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">20130001</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">on-line</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">391.45</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">58.14</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">703.80</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">78.15</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">7.20</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">合格</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">20130001</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">on-line</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">391.45</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">58.14</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">703.80</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">78.15</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">7.20</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">合格</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">20130001</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">on-line</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">391.45</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">58.14</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">703.80</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">78.15</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">7.20</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">合格</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>电流波形</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="currentWaveform" style="height: 210px" />
          </div>
        </el-card>
        <el-card>
          <div slot="header">
            <span>电压波形</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="voltageWaveform" style="height: 210px" />
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="12" class="card-box">
        <el-row :gutter="70" >
          <el-col :span="8" >
            <div class="grid-content bg-purple" >
              <el-row>
                <el-col :span="8">
                  <i class="el-icon-s-data" style="font-size:30px; margin: 30% 20%"></i>
                </el-col>
                <el-col :span="16" style="margin: 10% 0">
                  <div style="font-size: 20px">20ma</div>
                  <div style="font-size: 10px">通讯电流</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8" >
            <div class="grid-content bg-purple" >
              <el-row>
                <el-col :span="8">
                  <i class="el-icon-s-data" style="font-size:30px; margin: 30% 20%"></i>
                </el-col>
                <el-col :span="16" style="margin: 10% 0">
                  <div style="font-size: 20px">30.8V</div>
                  <div style="font-size: 10px">通讯电压</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="70" >
          <el-col :span="8" >
          <div class="grid-content bg-purple" >
            <el-row>
              <el-col :span="8">
                <i class="el-icon-s-data" style="font-size:30px; margin: 30% 20%"></i>
              </el-col>
              <el-col :span="16" style="margin: 10% 0">
                <div style="font-size: 20px">820ma</div>
                <div style="font-size: 10px">发火电流</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
          <el-col :span="8" >
            <div class="grid-content bg-purple" >
              <el-row>
                <el-col :span="8">
                  <i class="el-icon-s-data" style="font-size:30px; margin: 30% 20%"></i>
                </el-col>
                <el-col :span="16" style="margin: 10% 0">
                  <div style="font-size: 20px">80.8V</div>
                  <div style="font-size: 10px">发火电压</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="70" >
          <el-col :span="16" >
            <div class="grid-content bg-purple" >
              <el-row>
                <el-col :span="8">
                  <i class="el-icon-s-data" style="font-size:30px; margin: 30% 20%"></i>
                </el-col>
                <el-col :span="16" style="margin: 5% 0">
                  <div style="font-size: 40px">20138888</div>
                  <div style="font-size: 10px">当前ID</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="70" >
          <el-col :span="16" >
            <div class="grid-content bg-purple" >
              <label style="margin: 5px 40%">测试结果</label>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="70" >
          <el-col :span="16" >
            <div class="grid-content bg-purple" >
              <el-row>
                <el-col :span="8">
                  <i class="el-icon-s-custom" style="font-size: 70px; margin: 10px 20px"></i>
                </el-col>
                <el-col :span="16" >
                  <div >姓名：</div>
                  <div>工号：</div>
                  <div>联系：</div>
                  <div>工作时长：</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { listModdata } from "@/api/smart/moddata";
import { listProduct } from "@/api/smart/product";

export default {
  name: "index",
  dicts: ['smart_fault_state', 'smart_test_state', 'smart_inventory_state'],
  data() {
    return {
      // 电流波形
      currentWaveform: null,
      // 电压波形
      voltageWaveform: null,
      moddata:[],
      // 产品测试数据表格数据
      moddataList: [],
      // 产品表格数据
      productList: [],
    };
  },
  created() {
    this.getList();
    this.getProductList();
    // this.openLoading();
  },
  methods: {
    /** 查缓存询信息 */
    getList() {
        listModdata(this.queryParams).then(response => {
          this.moddataList = response.rows;
          if(this.moddataList.length > 0){
            this.moddata = this.moddataList[0]['data'];
          }
          this.moddata = JSON.parse(this.moddata);
          var xdata = [];
          var cdata = [];
          var vdata = [];
          for (let rt = 0; rt < this.moddata.length; rt++) {
            xdata.push(this.moddata[rt]['time']);
            cdata.push(this.moddata[rt]['current']);
            vdata.push(this.moddata[rt]['voltage']);
          }
          this.$nextTick(() => {
            this.currentWaveform = echarts.init(this.$refs.currentWaveform, "macarons");
            this.currentWaveform.setOption({
              xAxis: {
                type: 'category',
                data: xdata
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: cdata,
                  type: 'line',
                  smooth: true
                }
              ],
            });
            this.voltageWaveform = echarts.init(this.$refs.voltageWaveform, "macarons");
            this.voltageWaveform.setOption({
              xAxis: {
                type: 'category',
                data: xdata
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: vdata,
                  type: 'line',
                  smooth: true
                }
              ],
            });
          });
        });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    /** 查询产品列表 */
    getProductList() {
      // this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        if(this.productList.length > 3){
          this.productList = this.productList.slice(0,3);
        }
        // this.loading = false;
      });
    }
  },
};
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #F7F7F7;
  }
  .bg-purple {
    background: #F7F7F7;
  }
  .bg-purple-light {
    background:	#F7F7F7;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color:	#F7F7F7;
  }

</style>
